<template>
  <div class="avatar-cache-stats">
    <el-popover placement="top" :width="280" trigger="hover">
      <template #reference>
        <el-badge :value="stats.storage" :hidden="stats.storage === 0" type="info">
          <el-button type="info" size="small" circle>
            <el-icon><PictureRounded /></el-icon>
          </el-button>
        </el-badge>
      </template>
      
      <div class="cache-info">
        <h4>头像缓存状态</h4>
        <div class="stats-item">
          <span>内存缓存:</span>
          <el-tag size="small">{{ stats.memory }}</el-tag>
        </div>
        <div class="stats-item">
          <span>本地缓存:</span>
          <el-tag size="small" type="success">{{ stats.storage }}</el-tag>
        </div>
        <div class="stats-item">
          <span>加载中:</span>
          <el-tag size="small" type="warning">{{ stats.loading }}</el-tag>
        </div>
        <div class="actions">
          <el-button size="small" type="danger" @click="clearCache">
            清除缓存
          </el-button>
        </div>
      </div>
    </el-popover>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import { PictureRounded } from '@element-plus/icons-vue'
import avatarCache from '@/utils/avatarCache'

// 缓存统计数据
const stats = ref({
  memory: 0,
  storage: 0,
  loading: 0
})

// 更新统计数据
const updateStats = () => {
  stats.value = avatarCache.getCacheStats()
}

// 清除缓存
const clearCache = () => {
  avatarCache.clearCache()
  updateStats()
  ElMessage.success('头像缓存已清除')
}

let interval = null

onMounted(() => {
  updateStats()
  // 每5秒更新一次统计数据
  interval = setInterval(updateStats, 5000)
})

onUnmounted(() => {
  if (interval) {
    clearInterval(interval)
  }
})
</script>

<style scoped>
.avatar-cache-stats {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
}

.cache-info {
  padding: 10px 0;
}

.cache-info h4 {
  margin: 0 0 15px 0;
  color: #303133;
  font-size: 14px;
}

.stats-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 12px;
}

.stats-item span {
  color: #606266;
}

.actions {
  margin-top: 15px;
  text-align: center;
}
</style> 